<template>
  <!-- 修改资料 -->

  <div>
    <!-- 内容主题区域 -->
        <el-form label-width="85px" :model="form" label-position="right" ref="formRef" :rules="formRules"
          enctype="multipart/form-data" disabled class="borderNone">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>基本信息</span>
              </div>
            </template>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="公司">
                  <el-input v-model="form.companyName" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="部门">
                  <el-input v-model="form.deptName" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="工号">
                  <el-input v-model="form.number" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="姓名">
                  <el-input v-model="form.name" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="职位">
                  <el-input v-model="form.positionName" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="入司日期" prop="inDate">
                  <el-input v-model="form.inDate" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>联系方式</span>
              </div>
            </template>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="电话">
                  <el-input v-model="form.phone" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="邮箱">
                  <el-input v-model="form.email" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="即时通">
                  <el-input v-model="form.messageNo" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="地址">
                  <el-input v-model="form.address" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>详细信息</span>
              </div>
            </template>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="身份证号" prop="idCard">
                  <el-input v-model="form.idCard" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="英文名" prop="englishName">
                  <el-input v-model="form.englishName" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="人员类别">
                  <el-input v-model="form.employeeKindName" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="学历">
                  <el-input v-model="form.degreeName" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="生日">
                <el-input v-model="form.birthday" ></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="部门负责人">
                  <el-radio-group v-model="form.deptLeader" style="margin-top: -4px">
                    <el-radio label="1" size="large">是</el-radio>
                    <el-radio label="0" size="large">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="公司负责人">
                  <el-radio-group v-model="form.companyLeader" style="margin-top: -4px">
                    <el-radio label="1" size="large">是</el-radio>
                    <el-radio label="0" size="large">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="状态">
                  <el-radio-group v-model="form.status" style="margin-top: -4px">
                    <el-radio label="normal" size="large">启用</el-radio>
                    <el-radio label="disable" size="large">停用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="性别">
                  <el-input v-model="form.genderName" style="width: 300px" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card>
            <template #header>
              <div class="card-header">
                <span>照片备注</span>
              </div>
            </template>
            <el-row>
              <el-col>
                <el-form-item label="备注">
                  <el-input v-model="form.remark" style="width: 600px" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="上传照片">
                <el-icon v-if="imageUrl == ''" style="width: 200px;height: 150px;background-color: #f5f7fa;"><icon-picture /></el-icon>
                <div v-else class="image-container">
                  <img :src="imageUrl" style="width: 100%;height: 100%;" />
                  <div class="overlay">
                    <el-icon style="
                      position: absolute;
                      z-index: 1;
                      left: 50%;
                      top: 50%;
                      transform: translate(-50%, -50%);
                    " :size="30" @click="preview">
                      <Search />
                    </el-icon>
                  </div>
                </div>
              </el-form-item>
              <el-dialog v-model="dialogVisible">
                <img :src="imageUrl" alt="Preview Image" w-full style="width: 100%" />
              </el-dialog>
            </el-row>
          </el-card>
        </el-form>
        <div class="button-position">
          <el-button @click="updateVisible" type="primary" >退 出</el-button>
        </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { Search} from "@element-plus/icons-vue";
import { Picture as IconPicture } from '@element-plus/icons-vue'
import Api from '@/api/model/user'
const emit = defineEmits(['updatetable'])
const props = defineProps({
  paramsData: {
    type: Object,
    defalut: {},
  },
});
const imageUrl = ref();
const dialogVisible = ref(false);

// 查看用户数据的对象
const form = ref({});

onMounted(() => {
  getData();
});

const updateVisible = (val) => {
  emit('updatetable')
};

const preview = () => {
  dialogVisible.value = true;
};
//调取数据
const getData = async () => {
  let res = await Api.employee.detail.post(
    props.paramsData
  );
  if (res.code == 200) {
    form.value = res.data;
    imageUrl.value = res.data.fileFullPath;
  } else {
    form.value = "";
  }
};
</script>

<style lang="less" scoped>
.el-card {
  margin-bottom: 20px;
}

.borderNone {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    cursor: default;
    background-color: transparent; //背景颜色透明
    border-bottom: 1px solid #999;
    border-radius: 0;

    .el-input__inner {
      cursor: default !important;
    }
  }
}
.image-container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 150px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  cursor: pointer;
}

.overlay:hover {
  opacity: 1;
}
</style>

